<template>
  <Nav_bar :title="'详情页'" />
  <div class="order_details_box">
    <div class="box">
      <div class="order_details_info" v-for="(item, index) in orderInfo" :key="index">
        <!-- 订单详情页头部 -->
        <div class="order_details_headInfo">
          <img class="_img" :src="item.thumbUrl" alt="" />
          <span class="_name">{{ item.comboName }}</span>
          <div class="_price_number">
            <span class="_price">￥{{ item.amount }}</span>
            <div class="order_number">
              x <span class="_number">{{ item.count }}</span>
            </div>
          </div>
        </div>
        <div class="order_id" v-if="item.isException === '0'">
          货道号：<span class="_id number">{{ item.roadNo }}</span>
        </div>
        <div class="order_id">
          手机号码：<span><a class="phone" :href="`tel:${item.userMobile}`">{{ item.userMobile }}</a></span>
        </div>
        <div class="order_id">
          订单编号：<span class="_id">{{ item.orderSn }}</span>
        </div>
        <div class="order_id">
          下单时间：<span class="_id">{{ item.orderTime }}</span>
        </div>
        <div class="order_id">
          排队时间：<span class="_id">{{ item.queueTime }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { getMachineOrderInfoApi } from '@/api/machine/machine'
import { ref, reactive, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
const $route = useRoute()
const $router = useRouter()
const orderId = ref($route.query.orderId)
const orderInfo = ref([])
/**获取到套餐所绑定的订单详情 */
const getMachineOrderInfo = async () => {
  const res = await getMachineOrderInfoApi({ orderId: orderId.value })
  // console.log(res)
  orderInfo.value = res.data
}
getMachineOrderInfo()
</script>

<style lang="scss" scoped>
.van-nav-bar {
  height: 44px;
  line-height: 44px;
  padding: 0 9px 0 5px;
  background-color: #5ed1ae;
  .van-nav-bar__content {
    height: 44px;
    line-height: 44px;
    .van-nav-bar__title {
      color: #fff;
      font-weight: 400;
      font-size: var(--fs18);
    }
  }
}
.order_details_box {
  width: 100%;
  min-height: calc(100% - 44px);
  background-color: var(--defaultBgc);
  padding: 14px;
  .box {
    width: 100%;
    min-height: 100%;
    background-color: #fff;
    border-radius: 3px;
    .order_details_info {
      padding: 10px 0;
      margin: 6px auto;
      width: 326px;
      // height: 144px;
      border-radius: 5px;
      background: #fff;
      box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.09);
    }
  }
}

.order_details_headInfo {
  padding: 10px 0 0 11px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  ._img {
    width: 63px;
    height: 42px;
    border-radius: 3px;
  }
  ._name {
    flex: 1;
    margin-left: 7px;
    color: #333;
    font-size: 12px;
  }
  ._price {
    color: #bb1a1a;
    font-size: 12px;
  }
  ._price_number {
    text-align: right;
    margin-right: 10px;
  }
  .order_number {
    display: flex;
    justify-content: end;
    align-items: end;
    font-size: 8px;
  }
  ._number {
    font-size: 12px;
  }
}

.order_id {
  width: 214px;
  height: 21px;
  line-height: 21px;
  margin: 5px 0 0 11px;
  padding-left: 3px;
  color: #333;
  font-size: 12px;
  ._id {
    color: #999;
    font-size: 10px;
  }
  .phone {
    color: #009066;
    &::before {
      content: '';
    }
  }
  .number {
    font-size: 12px;
  }
}
</style>
